<script setup lang="ts">
import { getResourcesPages } from '@/api/resources';
import type { ResourceCondition, ResourcePageData } from '@/api/resources';
import { useToggle } from '@vueuse/core';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import resourceCategoryList from '../resourse-category/ResourceCategoryIndex.vue'
import { timeFormatter } from '@/utils/dayjs'

const router = useRouter();

// Vueuse加载效果、危险提示
const [isLoading, toggleLoading] = useToggle(false);

// 国际化
const { t } = useI18n();

// 查询条件初始化
const resourceCondition = reactive<ResourceCondition>({
    name: '',
    url: '',
    categoryId: '',
    current: 1,
    size: 5
});


// 查询结果初始化
const resourceResult = ref<ResourcePageData>({
    current: 1,
    records: [],
    size: 0,
    total: 0
})

// 查询逻辑
function hdlSearch() {
    resourceResult.value.current = 1;
    fetchData();
}

// 重置逻辑
function hdlClear() {
    resourceCondition.name = '';
    resourceCondition.url = '';
    resourceCondition.categoryId = '';
    resourceCondition.current = 1;
    fetchData();
}

// 查询方法
async function fetchData(params: ResourceCondition = {}) {
    toggleLoading(true)
    // 合并查询条件
    Object.assign(resourceCondition, params)
    const { data } = await getResourcesPages(resourceCondition);
    if (data.code === '000000') {
        resourceResult.value = data.data;
        console.log(data.data);

    } else {
        ElMessage.error(t('resource.fetchError'));
        throw new Error(t('resource.fetchError'));
    }
    toggleLoading(false)
}

onMounted(fetchData)
</script>

<template>
    <div class="resources-index">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item :label="t('resource.resourceName')">
                <el-input v-model="resourceCondition.name" :placeholder="t('resource.resourceName')" clearable
                    size="large" :disabled="isLoading" />
            </el-form-item>
            <el-form-item :label="t('resource.resourceUrl')">
                <el-input v-model="resourceCondition.url" :placeholder="t('resource.resourceUrl')" clearable
                    size="large" :disabled="isLoading" />
            </el-form-item>
            <el-form-item :label="t('resource.resourceCategory')">
                <el-select v-model="resourceCondition.categoryId" :placeholder="t('resource.noLimit')" clearable
                    size="large" :disabled="isLoading">
                    <el-option label="{{ t('resource.noLimit') }}" value="" />
                    <el-option v-for="category in resourceCategoryList" :key="category.id" :label="category.name"
                        value="category.id" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button size="large" @click="hdlClear" :disabled="isLoading">{{ t('resource.resetButton')
                    }}</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="info" size="large" @click="hdlSearch" :disabled="isLoading">{{
                    t('resource.searchButton')
                }}</el-button>
            </el-form-item>
        </el-form>
        <el-divider>
            <el-icon><el-icon-star-filled /></el-icon>
        </el-divider>
        <div>
            <div class="resources-buttons">
                <ElButton size="large" :disabled="isLoading">{{ t('resource.addButton') }}</ElButton>
                <ElButton size="large" :disabled="isLoading" @click="router.push('/resource-category')">{{
                    t('resource.resourceCategory') }}
                </ElButton>
            </div>
            <div v-loading="isLoading">
                <ElTable :data="resourceResult.records" border style="width: 100%;">
                    <ElTableColumn type="index" label="序号" align="center" />
                    <ElTableColumn prop="name" label="资源名称" align="center" />
                    <ElTableColumn prop="url" label="资源地址" align="center" />
                    <ElTableColumn prop="description" label="资源描述" align="center" />
                    <ElTableColumn prop="createdTime" label="添加时间" :formatter="timeFormatter" align="center" />
                    <ElTableColumn label="操作" align="center">
                        <ElButton type="primary">编辑</ElButton>
                        <ElButton type="danger">删除</ElButton>
                    </ElTableColumn>
                </ElTable>
            </div>
            <div>
                <el-pagination :total="resourceResult.total" :disabled="isLoading" border background
                    layout="total, prev, pager, next, jumper" :current-page="resourceResult.current" />
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.resources-index {
    gap: 0.25rem;
    // background-color: rgb(255, 255, 255);
    padding: 0.5rem;
}

.resources-buttons {
    display: flex;
    margin-bottom: 5px;
}

.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>
